<template>
	<view class="container">
		<uni-section title="门店信息" type="line">
			<view v-for="item in list">
				<view class="shop-show-img">
					<image class="shop-img" :src="item.avatar"></image>
				</view>
				<view class="shop-show-text">
					<view class="shop-title">
						<text class="s_md">{{item.name}}</text>
					</view>
					</br>
					<view class="shop-text">
						<text class="s_t">地址：{{item.ads}}</text>
						</br>
						<text class="s_t">营业时间：9.00~12.00</text>
						</br>
						<text class="s_t">计费：前5分钟免费，1.5元/0.5小时,30元/24小时</text>
					</view>
					<view class="shop-b">
						<button class="shop-b1">
							<image class="img-b" src="../../static/shop/cdg.png"></image>
							<text>可用 .... </text>
							<text v-if="item.sum < 30">可还</text>
							<text v-else>不可还</text>
						</button>
					</view>
				</view>
				<view class="shop-show-btn">
					<button type="primary" plain="true" class="shop-btn1" @click="tomap">扫码充电</button>
					<button type="default" plain="true" class="shop-btn2" @click="todh(item)">去这里约 m</button>
				</view>
			</view>
		</uni-section>
	</view>
</template>


<script>
	import {
		shoplistbyid
	} from '../../api/shop.js'
	export default {
		components: {},
		data() {
			return {
				id: '',
				list: null,
				latitude: 0,
				longitude: 0,
				key: '5N6BZ-TPDKD-Q4N4L-POWXS-GQ5XK-FSBQG'
			}
		},
		onLoad: function(option) {
			let data = {
				id: option.id,
			}
			shoplistbyid(data).then(res => {
				console.log(res)
				this.list = res.data.data
				console.log(this.list)
			})

			uni.getLocation({
				type: 'gcj02',
				success: res => {
					// 获取坐标后存起来
				}
			});

		},
		methods: {
			tomap() {
				uni.navigateTo({
					url: "/pages/map/map",
				})
			},
			todh(e) {
				console.log(e)
				uni.request({
					url: 'https://apis.map.qq.com/ws/geocoder/v1/?address=' + '四川市成都市'+e.ads + '&key=' + this.key,
					success: res => {
						console.log(res)
						this.latitude = res.data.result.location.lat
						this.longitude = res.data.result.location.lng
						// console.log(this.lat)
						// console.log(this.lng)
					}
				})

				let plugin = requirePlugin('routePlan');
				// 这里的k自己在腾讯地图api上申请
				let key = this.key; //使用在腾讯位置服务申请的key
				let referer = '充电宝'; //调用插件的app的名称
				let endPoint = JSON.stringify({ //终点
					'name': e.ads,
					'latitude': this.latitude,
					'longitude': this.longitude,
				});
				wx.navigateTo({
					url: 'plugin://routePlan/index?key=' + key + '&referer=' + referer + '&endPoint=' +
						endPoint
				});
			}
		}
	}
</script>
<style>
	.shop-show-img {
		width: 750rpx;
		height: 483rpx;
		display: block;
		box-sizing: border-box;
	}

	.shop-img {
		width: 750rpx;
		height: 483rpx;
		display: inline-block;
		box-sizing: border-box;
	}

	.shop-show-text {
		width: 750rpx;
		height: 330rpx;
		display: block;
		box-sizing: border-box;
	}

	.shop-title {
		width: 750rpx;
		height: 76rpx;
	}

	.s_md {
		position: relative;
		left: 35rpx;
		top: 11rpx;
		font-size: 20px;
	}

	.s_t {
		position: relative;
		left: 35rpx;
		top: 0rpx;
	}

	.shop-b {
		width: 750rpx;
		height: 138rpx;
		display: block;
		box-sizing: border-box;
	}

	.shop-b1 {
		position: relative;
		left: 0rpx;
		top: 30rpx;
		width: 660rpx;
		height: 84rpx;
		display: block;
		box-sizing: border-box;
		background-color: #F8F8FF;
		border-radius: 8px;
	}

	.img-b {
		position: relative;
		left: 0rpx;
		top: 11rpx;
		width: 50rpx;
		height: 50rpx;
	}

	.shop-show-btn {
		width: 750rpx;
		height: 174rpx;
		display: block;
		box-sizing: border-box;
	}

	.shop-btn1 {
		position: relative;
		left: -182rpx;
		top: 36rpx;
		width: 296rpx;
		height: 100rpx;
		display: block;
		box-sizing: border-box;
		border-radius: 20px;
	}

	.shop-btn2 {
		position: relative;
		left: 184rpx;
		top: -64rpx;
		width: 296rpx;
		height: 100rpx;
		display: block;
		box-sizing: border-box;
		border-radius: 20px;
	}
</style>